<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="shortcut icon" href="./img/logo.jpg" />
    <link rel="stylesheet" href="./css/common.css">

    <link rel="stylesheet" href="./css/miindex.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>
<style>
    header {
        width: 100%;
        display: flex;
        height: 72px;
        background-color: white;
        font-size: 16px;
        position: fixed;
        top: 0;
        border-bottom: 1px solid rgb(218, 218, 218);
        z-index: 10;
    }

    .header_left {
        width: 50%;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-right: 100px;
    }

    .header_left img {
        width: 40px;
        height: 40px;

    }


    .header_menu span {
        font-size: 25px;
        width: 40px;
        height: 40px;
    }

    .header_right {
        padding-right: 80px;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .header_right span {
        font-size: 22px;
    }

    .header_right input {
        width: 260px;
        height: 40px;
        text-indent: 0;
        /* height: 100%; */
        background-color: transparent;
        padding-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* border-style: none; */
        border: 1px solid gray;
        background-color: white;
    }


    .search {
        display: flex;
        justify-content: left;
        align-items: center;
        /* border-collapse: collapse; */
    }

    .header_right .search_a {
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        width: 40px;
        height: 40px;
        border: 1px solid rgb(218, 218, 218);
        border-left: 0;
    }
    th{
        font-weight: 500;
        /* align-items:baseline; */
    }
    tr{
        border-bottom: 1px solid rgb(224,224,224);
        z-index: 100;
    }
</style>
<body>
    <header>
        <div class="header_left">
            <a href="XiaoMi.html"><img src="./img/logo.jpg" alt=""></a>
            <span class="women" style="font-size:25px">我的购物车</span><span style="font-weight: 400;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>

        </div>
        <div class="header_right">
            <div class="search">
                <input type="text" placeholder="搜索商品">
                <span class="iconfont search_a">&#xe651;</span>

            </div>
            <span class="iconfont">&#xe62f;</span>
            <span class="iconfont">&#xe638;</span>
            <span class="iconfont">&#xe6de;</span>
            <span class="iconfont">&#xe631;</span>

        </div>

    </header>
    <main>
        <div id="app">
            <div class="shoppingBar">
                <h2>购物清单</h2>
                <table>
                    <tbody>
                        <tr>
                            <th><input type="checkbox" title="全选" class="selectAll">全选</th>
                            <th style="width:300px">商品名称</th>
                            <th style="margin-left:-30px">数量</th>
                            <th>单价</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                        <tr class="commodity">
                            <th><input type="checkbox" class="input select" value="1"></th>
                            <th class="content"><img src="img/1 (1).jpg" width="100px" height="100px">
                                <p>电视机 </p>
                            </th>
                            <th class="add_reduce"><button type="button" class="reduce">
                                    -
                                </button> <span class="spanNumber">
                                    1
                                </span> <button type="button">
                                    +
                                </button></th>
                            <th>
                                200
                            </th>
                            <th class="money">
                                200
                            </th>
                            <th><span class="glyphicon glyphicon-remove">×
                                </span></th>
                        </tr>
                        <tr class="commodity">
                            <th><input type="checkbox" class="input select" value="2"></th>
                            <th class="content"><img src="img/1 (2).jpg" width="100px" height="100px">
                                <p>洗衣机</p>
                            </th>
                            <th class="add_reduce"><button type="button" class="reduce">
                                    -
                                </button> <span class="spanNumber">
                                    1
                                </span> <button type="button">
                                    +
                                </button></th>
                            <th>
                                150
                            </th>
                            <th class="money">
                                150
                            </th>
                            <th><span class="glyphicon glyphicon-remove">×
                                </span></th>
                        </tr>
                        <tr class="commodity">
                            <th><input type="checkbox" class="input select" value="3"></th>
                            <th class="content"><img src="img/1 (3).jpg" width="100px" height="100px">
                                <p>冰箱 </p>
                            </th>
                            <th class="add_reduce"><button type="button">-</button class="reduce">
                                <span class="spanNumber">1</span>
                                <button type="button" style="width:14px ;height:14px">+</button></th>
                            <th>
                                100
                            </th>
                            <th class="money">
                                100
                            </th>
                            <th><span class="glyphicon glyphicon-remove">×
                                </span></th>
                        </tr>
                    </tbody>
                </table>
                <div class="shoppingBar-footer">
                    <div class="manage"><span class="delAll">
                            删除所选商品
                        </span> <span class="return">
                            继续购物
                        </span></div> <button id="go" type="button">
                        去结算
                    </button>
                    <div class="buy"><span>
                            0
                        </span>
                        件商品总计:
                        <span>
                            ￥0
                        </span></div>
                </div>
            </div>
        </div>
    </main>
</body>

<script src="./common.js"></script>
<script src="./jQuery.js"></script>
<script src="./layui/layui.js"></script>
<script src="./cart.js"></script>

</html>